$lightColor = #32a4f9
$garyColor = #999
px2rem($px){
  1rem * ($px / 12px)
}
@media screen and (min-width: 320px) and (max-width: 359px){
  html{
    font-size: px2rem(10px)
  }
}

@media screen and (min-width: 360px) and (max-width: 374px){
  html{
    font-size: px2rem(10.5px)
  }
}
@media screen and (min-width: 375px) and (max-width: 385px){
  html{
    font-size: px2rem(10.5px)
  }
}
@media screen and (min-width: 386px) and (max-width: 392px) {
  html{
    font-size: px2rem(11.5px)
  }
}
@media screen and (min-width: 393px) and  (max-width: 400px){
  html{
    font-size: px2rem(12px)
  }
}
@media screen and (min-width: 401px) and (max-width: 414px){
  html{
    font-size: px2rem(12.5px)
  }
}
@media screen and (min-width: 750px) and (max-width: 799px){
  html{
    font-size: px2rem(18px)
  }
}
@media screen and (min-width: 799px){
  html{
    font-size: px2rem(22px)
  }
}

//  reset
body, ol, ul, h1, h2, h3, h4, h5, h6, p, th, td, dl, dd, form, fieldset, legend, input, textarea, select {
  margin: 0;
  padding: 0;
}

body {
  font-family: PingFang SC, PingFang TC, PingFang HK;
  color: #333;
  background #eeeff4
}

a, a:hover {
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
a,input {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
  em, i {
  font-style: normal
}

li {
  list-style: none
}

img {
  border: 0;
  vertical-align: middle
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

p {
  word-wrap: break-word
}

input, textarea {
  background:none;
  border:0px;
  outline: none;
  font-family: "微软雅黑", "microsoft yahei";
  -webkit-tap-highlight-color:rgba(255,0,0,0);
  -webkit-appearance:none;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-overflow-scrolling: touch;
}

//  common
.tc
  text-align center

.tr
  text-align right

.flex
  display flex
.flex1
  flex 1

.align
  align-items center

.flex-between
  justify-content space-between

.flex-around
  justify-content space-around

.row-reverse
  flex-direction row-reverse
.bg-white
  background #fff
.border-bottom1:after
  content ''
  position absolute
  left 0
  bottom 0
  width 100%
  height 1px
  border-bottom 1px solid #eeeeee
  transform scaleY(0.7)
.border-top1:after
  content ''
  position absolute
  left 0
  bottom 0
  width 100%
  height 1px
  border-top 1px solid #eeeeee
  transform scaleY(0.7)

  /*清除浮动*/
.clear
  zoom 1
  &:after
    display block
    clear both
    content ""
    visibility hidden
    height 0

// 一像素边框
//  .border
//    height 1px
//    background #e6e6e6
//    transform scaleY(0.5)
//    transform-origin 0 0
//    overflow hidden


//  公共部分
.fill-foot
  height px2rem(60px)

footer
  width 100%
  position fixed
  left 0
  bottom 0
  box-shadow 0 0 px2rem(10px) 0 rgba(170,170,170,0.5)
  .foot-item
    padding px2rem(6px)
    &.active
      color $lightColor
    p
      margin-top px2rem(2px)
    .ra
      font-size px2rem(16px)
      padding-bottom px2rem(6px)

.loadingWrap
  position fixed
  top 50%
  left 50%
  width px2rem(100px)
  height px2rem(100px)
  margin-top px2rem(-50px)
  margin-left px2rem(-50px)
  z-index 300
  background-image url('https://pimg.ec51.com/static/cardlazy-loding.gif')
  background-repeat no-repeat
  background-position center center
  background-size 54%
  background-color rgba(0, 0, 0, 0.9)


.loading
  width px2rem(15px)
  height px2rem(15px)
  background-image url('https://pimg.ec51.com/loading4.gif')
  background-repeat no-repeat
  background-position center center
  background-size 100%
  margin px2rem(10px) auto

.wrapper
  margin px2rem(20px)
  width 30%
  height px2rem(30px)
  line-height px2rem(30px)
  text-align center
  .line
    display inline-block
    width 30%
    border-top 1px solid #ddd
    border-bottom 1px solid #ddd
    vertical-align middle
  .content
    padding 0 px2rem(20px)


